<template>
  <div class="v-table">
    <ul
      class="list-title"
      :style="{ height: config.height, 'background-color': config.titlebg }"
    >
      <li
        class="list-title-item"
        v-for="item in config.titles"
        :key="item.key"
        :style="{
          width: item.width,
          'justify-content': item.align,
          height: config.titleHeight,
        }"
      >
        {{ item.title }}
      </li>
    </ul>
    <div class="list-body" :style="tbodyStyle" :key="key">
      <div class="swiper" ref="swiper">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in config.list"
            :key="index"
            :style="{ height: config.rowHeight }"
          >
            <ul
              class="list-item"
              :class="index % 2 === 0 ? 'list-item-odd' : 'list-item-singular'"
              :style="{ 'background-color': config.rowbg }"
            >
              <li
                v-for="it in config.titles"
                :key="it.key"
                :style="{ width: it.width, 'justify-content': it.align }"
              >
                <template v-if="it.key === 'index'">{{ index + 1 }}</template>
                <template v-else>
                  {{ item[it.key] }}
                </template>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonMixin from "../mixins/commonMixin";
export default {
  name: "v-table",
  mixins: [CommonMixin],
  data() {
    return {
      lists: [
        {
          department: "研发1",
          chulajsh: "案件",
        },
        {
          department: "研发2",
          chulajsh: "案件",
        },
        {
          department: "研发3",
          chulajsh: "案件",
        },
        {
          department: "研发4",
          chulajsh: "案件",
        },
        {
          department: "研发5",
          chulajsh: "案件",
        },
        {
          department: "研发6",
          chulajsh: "案件",
        },
        {
          department: "研发7",
          chulajsh: "案件",
        },
      ],
      swiper: null,
      key: 0,
    };
  },

  computed: {
    tbodyStyle() {
      return {
        height: `calc(100% - ${this.config.titleHeight})`,
      };
    },
  },
  methods: {
    init() {
      this.initSwiper();
    },
    initSwiper() {
      if (this.swiper) {
        this.swiper.destroy();
        this.key++;
      }
      this.$nextTick(() => {
        this.swiper = new window.Swiper(this.$refs.swiper, this.config.swiperConfig);
      });
    },
    update() {
      this.initSwiper();
    },
    resize() {
      this.initSwiper();
    },
  },
};
</script>

<style scoped>
.v-table {
  width: 100%;
  height: 100%;
  color: #fff;
}
.v-table .swiper {
  width: 100%;
  height: 100%;
}
.list-title {
  width: 100%;
  display: flex;
}
.list-title-item {
  height: 100%;
  display: flex;
  align-items: center;
}
.list-item {
  width: 100%;
  height: 100%;
  display: flex;
}
.list-item > li {
  display: flex;
  align-items: center;
}
</style>
